import { WeaDialog, WeaFormItem, WeaInput, WeaTextarea, WeaSelect, WeaError } from 'ecCom';
import App from '../../apis/app';
import { Button } from 'antd';

export default class InnerCreateDialog extends React.Component {
    state = {
        options: [],
        name: '',
        groupid: '',
        description: ''
    }
    componentDidMount() {
        App.getLeftDatas().then(datas => {
            const options = datas.map(d => ({ key: d.id, showname: d.groupName, selected: d.isdefault === '1' }));
            const option = options.find(d => d.selected);
            this.setState({ options });
            if (option) {
                this.setState({ groupid: option.key });
            }
        })

    }
    changeName = (v) => {
        this.setState({ name: v });
    }
    changeGroupId = (v) => {
        this.setState({ groupid: v });
    }
    changeDescription = (v) => {
        this.setState({ description: v });
    }
    hide = () => {
        this.props.onVisibleChange(false);
        this.props.onCancel();
    }
    ok = () => {
        if (this.state.name) {
            App.innerCreate({
                name: this.state.name, description: this.state.description, groupid: this.state.groupid, displayType: this.props.displayType,
                fillinType: this.props.fillinType
            }).then(id => {
                this.props.router.push('edc/designer/'+id);
                this.hide();
            })
        } else {
            if (this.nameError) {
                this.nameError.showError();
            }
        }
    }
    render() {
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@cps2t9`}
                visible={this.props.visible}
                onCancel={this.hide}
                //moduleName={dialog.moduleName}
                icon={"icon-coms02-Data-center"}
                iconBgcolor="#1a57a0"
                title="新建应用"
                draggable={true}
                buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@aognkw@cancel`} onClick={this.hide}>取消</Button>, <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5perjf@onOk`} onClick={this.ok} type="primary">确定</Button>]}
                hasScroll={true}
                style={{ height: 250 }}
            >
                <div className="edc-inner-create-content">
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6ur3vt`}
                        label="名称"
                        labelCol={{ span: '6' }}
                        wrapperCol={{ span: '18' }}>
                        <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@9n1u63`} ref={ref => this.nameError = ref} error="名称不能为空">
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@tj5fdx`} value={this.state.name} onChange={this.changeName} viewAttr={3}></WeaInput>
                        </WeaError>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@g6kn19`}
                        label="描述"
                        labelCol={{ span: '6' }}
                        wrapperCol={{ span: '18' }}>
                        <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@v3j5su`} maxRows={4} minRows={4} value={this.state.description} onChange={this.changeDescription} viewAttr={2}></WeaTextarea>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@surg2b`}
                        label="分组"
                        labelCol={{ span: '6' }}
                        wrapperCol={{ span: '18' }}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@7c0orm`} value={this.state.groupid} onChange={this.changeGroupId} options={this.state.options} viewAttr={2}></WeaSelect>
                    </WeaFormItem>
                </div>
            </WeaDialog>
        )
    }
}